<template>
  <view class="container">
    <float-button name="dutyRecord" />

    <FilterView ref="filterView">
      <template #search>
        <uni-datetime-picker
          type="date"
          v-model="queryData.dutyDate"
          @confirm="onSearch"
          @change="changeDate"
        />
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="12">
              <uni-forms-item label="值班计划" name="dutyPlanId">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="dutyPlanId"
                  v-model="queryData.dutyPlanId"
                />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="12">
              <uni-forms-item label="值班人" name="dutyUserIds">
                <uni-easyinput
                  v-model="queryData.dutyUserIds"
                  placeholder="请输入"
                />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="listDutyPlan"
            :init="{}"
            height="80vh"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <view class="box">
                <view
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  @click="onClick(item)"
                >
                  <view class="t">
                    <view class="l">值班人</view>
                    <view class="r"
                      ><view class="dutyNickNames" />{{
                        item.dutyNickNames
                      }}</view
                    >
                  </view>
                  <view class="b">
                    <view class="bItem">
                      <view class="name">值班日期</view>
                      <view class="value">{{ item?.dutyDate }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">值班开始时间</view>
                      <view class="value">{{ item?.dutyStartTime }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">值班结束时间</view>
                      <view class="value">{{ item?.dutyEndTime }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">接班人</view>
                      <view class="value">{{ item.successorNickNames }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">预定值班人是否变动</view>
                      <view class="value">{{
                        $util.selectDictLabel(
                          dutyUserIsChange,
                          item?.dutyUserIsChange
                        )
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">岗位</view>
                      <view class="value">{{ item.post }}</view>
                    </view>
                    <view class="bItem" v-if="item.dutyUserIsChange == 1">
                      <view class="name">值班人变动原因</view>
                      <view class="value">{{ item.changeReason }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">当班情况及处理情况</view>
                      <view class="value">{{ item.dutySituation }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import _ from 'lodash';
import { listDutyPlan, getSelList } from '@/api/dutyRecord';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
import ViewAudit from '../workOrder/viewAudit.vue';
export default {
  components: {
    FilterView,
    ListScrollView,
    ViewAudit,
  },
  data() {
    return {
      dutyUserIsChange: [
        { label: '否', text: '否', value: 0 },
        { label: '是', text: '是', value: 1 },
      ],
      queryData: {},
      dutyPlanId: [],
      partnerShopId: [],
      enabled: false,
      // 右侧选项内容及样式
      rightOptions: [
        {
          text: '扫码打卡',
          style: {
            backgroundColor: '#007aff',
          },
        },
      ],
      // api
      listDutyPlan,
      // 重复点击，使用noMultipleClicks方法时，需要在当前页面创建此变量
      noClick: true,
    };
  },
  onLoad(query) {
    getSelList().then((res) => {
      this.dutyPlanId = res.data.map((v) => {
        return {
          text: `${v.shiftName}(${v.dutyDate})`,
          label: `${v.shiftName}(${v.dutyDate})`,
          value: v.dutyPlanId,
        };
      });
    });
  },
  onShow() {
    this.queryData.dutyDate = this.$util.timestampToTime(
      new Date().getTime() - 1000 * 60 * 60 * 24,
      'YYYY-MM-DD'
    );
    this.$nextTick(() => {
      this.$refs[`scrollView0`].searchData(this.queryData);
    });
  },
  methods: {
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView0`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = {
        dutyDate: this.$util.timestampToTime(
          new Date().getTime() - 1000 * 60 * 60 * 24,
          'YYYY-MM-DD'
        ),
      };
    },
    onSearch(e) {
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 刷新
    changeDate(v) {
      this.queryData.dutyDate = v;
      this.$refs[`scrollView0`].searchData(this.queryData);
    },
    // 跳转
    onClick(e) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-bottom) - 200rpx);
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  .prodPraiseRanking-img {
    display: inline-block;
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: -75rpx;
    right: 20rpx;
    z-index: 999;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .date-p {
    padding: 20rpx;
  }
  .uni-navbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;
  }
  .dateBox {
    line-height: 1;
    padding: 24rpx 50rpx;
    display: flex;
    align-items: baseline;
    position: relative;
    .week {
      font-size: 36rpx;
      margin-right: 10rpx;
    }
    .date {
      color: #989898;
    }
    .icon {
      position: absolute;
      top: 16rpx;
      right: 40rpx;
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .box {
      margin: 0 36rpx;
    }
    .item {
      line-height: 1;
      margin-bottom: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(0, 0, 0, 0.06);
      letter-spacing: 4rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .t {
        padding: 24rpx 34rpx 16rpx;
        border-bottom: 2rpx solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          font-size: 32rpx;
          color: #333333;
          line-height: 38rpx;
        }
        .r {
          font-size: 32rpx;
          color: #505050;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .point {
            width: 12rpx;
            height: 12rpx;
            margin-right: 6rpx;
            background: #ffb93b;
            border-radius: 50%;
          }
        }
      }
      .b {
        padding: 26rpx 34rpx 32rpx;
        .bItem {
          margin-bottom: 16rpx;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            min-width: 38%;
            // width: 38%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .value {
            // flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
          }
        }
      }
    }
  }
}
</style>
